<template>
  <div id="app">
    <Meta pagealias="jobfairlist" />
    <Head>招聘会</Head>
    <div class="b1"><img src="../../assets/images/jobfairlist/1.png" alt=""></div>
    <van-empty
      image="search"
      description="没有找到对应的数据"
      style="background-color:#fff"
      v-if="show_empty === true"
    />
    <van-list
      v-if="dataset.length > 0"
      v-model="loading"
      :finished="finished"
      :finished-text="finished_text"
      @load="onLoad"
      :immediate-check="true"
    >
      <div class="b2">
        <div class="b_item" v-for="(item,index) in dataset" :key="index" @click="toDetail(item.id)">
          <img class="img" :src="item.thumb" alt="">
          <div class="info">
            <div class="t1">
              <span :class="'st holddate' + item.holddate">{{item.holddate_text}}</span>{{item.title}}
            </div>
            <div class="t2">
              <span class="hd">参会企业</span><span class="hn">{{item.company_num}}</span>
              <span class="hd">查看次数</span><span class="hn nm">{{item.click}}</span>
            </div>
          </div>
          <div :class="'t3 status'+item.friendly_tips">{{item.friendly_tips_text}}</div>
          <div class="t4 substring">主办方：{{item.sponsor}}</div>
          <div class="t4 substring">举办时间：{{item.holddate_start | timeFilter}} 至 {{item.holddate_end | timeFilter}}</div>
          <div class="t4 substring">举办地点：{{item.address}}</div>
        </div>
      </div>
    </van-list>
    <div class="bm" @click="toReserve"></div>
  </div>
</template>

<script>
import wxshare from '@/assets/js/share.js'
import { parseTime } from '@/utils/index'
import http from '@/utils/http'
import api from '@/api'
export default {
  name: 'Index',
  filters: {
    timeFilter (timestamp) {
      return parseTime(timestamp, '{m}月{d}日 {h}:{i}')
    }
  },
  data () {
    return {
      dataset: [],
      params: {
        page: 1,
        pagesize: 15
      },
      show_empty: !1,
      loading: !1,
      finished: !1,
      finished_text: ''
    }
  },
  created () {
    this.getJobfair(!0)
    wxshare({}, 'jobfairlist', location.href)
  },
  methods: {
    getJobfair: function (init) {
      var t = this
      http.get(api.jobfair, t.params).then(r => {
        if (init === true) {
          this.dataset = [...r.data.items]
        } else {
          this.dataset = this.dataset.concat(r.data.items)
        }
        // 加载状态结束
        this.loading = false

        // 数据全部加载完成
        if (r.data.items.length < this.params.pagesize) {
          this.finished = true
          if (init === false) {
            this.finished_text = '没有更多了'
          } else if (r.data.items.length === 0) {
            this.show_empty = true
          }
        }
      }).catch(() => {})
    },
    onLoad: function () {
      this.params.page++
      this.getJobfair(!1)
    },
    toDetail: function (id) {
      this.$router.push('/jobfair/' + id)
    },
    toReserve: function () {
      this.$router.push('/jobfair/reserve')
    }
  }
}
</script>

<style lang="scss" scoped>
  .bm {
    position: fixed;right: 15px;bottom: 55px;width: 45px;height: 45px;border-radius: 45px;
    background: rgba(0,0,0,0.5) url("../../assets/images/jobfairlist/6.png") center center no-repeat;
    background-size: 28px;
  }
  .b2 {
    width: 375px;padding: 0 17px;
    .b_item {
      .t4 {
        margin-bottom: 5px;font-size: 13px;color: #999;
      }
      .t3 {
        width: 100%;padding: 5px 0;margin-bottom: 8px;font-size: 11px;color: #999;text-align: center;background-color: #fbfbfb;
        &.status0 {
          color: #ff6600;background-color: #fffbeb;
        }
        &.status1 {
          color: #ff6363;background-color: #fff8f8;
        }
        &.status2 {
          color:#8c8c8c;
        }
        &.status3,&.status4 {
          color:#1787fb;
        }
        &.status5{color: #ff6600;background-color: #fffbeb;}
      }
      .t2 {
        .hn {
          margin-right: 15px;font-size: 14px;color: #333;
          &.nm {
            margin-right: 0;
          }
        }
        .hd {
          margin-right: 6px;font-size: 13px;color: #666;
        }
        line-height: 20px;padding-left: 113px;margin-bottom: 7px;
      }
      .t1 {
        height: 54px;padding-left: 113px;font-size: 15px;color: #333;font-weight: bold;word-break: break-all;line-height: 1.8;
        .st {
          padding: 1px 6px;font-size: 10px;border-radius: 18px;margin-right: 5px;vertical-align: middle;
          &.holddate1 {
            color: #ff6363;border: 1px solid #ff6363;
          }
          &.holddate0 {
            color: #ff8800;border: 1px solid #ff8800;
          }
          &.holddate2 {
            color: #999;border: 1px solid #999;
          }
        }
      }
      .img {
        position: absolute;left: 0;top: 27px;width: 100px;height: 59px;border: 0;
      }
      .info{min-height:68px}
      position: relative;padding: 20px 0 10px 0;border-bottom: 1px solid #f3f3f3;
    }
  }
  .b1 {
    width: 375px;height: 150px;
    img {
      width: 375px;height: 150px;border: 0;
    }
  }
</style>
